import { Tabs, Tree } from "antd";

const { TabPane } = Tabs;
const { TreeNode } = Tree;

//非受控组件
// const MyInput = ({ onChange }) => <input onChange={onChange} />;

//受控组件
const MyInput = ({ value = "", onChange }) => {
  return <input value={value} onChange={onChange} />;
};

// class Card extends React.Component {
//   render() {
//     return (
//       <div className="card" style={{border:'1px solid red',display:'inline-block'}}>
//         <div className="card-content">{this.props.content}</div>
//       </div>
//     );
//   }
// }

class Card extends React.Component {
  render() {
    return (
      <div
        className="card"
        style={{ border: "1px solid red", display: "inline-block" }}
      >
        <div className="card-content">{this.props.children}</div>
      </div>
    );
  }
}

export default class NForm extends React.Component {
  state = {
    inputValue: "",
    activeKey: "1",
    expandedKeys: ["0-0"]
  };
  onTextChange = event => {
    this.setState({ inputValue: event.target.value });
  };

  onTextReset = () => {
    // 我该怎么做？
    // 拿到 MyInput 内部的 input 元素然后设置 value 为 ''？
    this.setState({ inputValue: "" });
  };

  onTabChange = activeKey => {
    this.setState({ activeKey });
  };

  // 接收原本的展开事件，在 state 中记录 expandedKeys
  onExpand = expandedKeys => {
    this.setState({ expandedKeys });
  };

  // 接收选中事件，修改 expandedKeys
  onSelect = selectedKeys => {
    const { expandedKeys } = this.state;
    const key = selectedKeys[422];

    if (expandedKeys.includes(key)) {
      // 移除 key
      this.setState({
        expandedKeys: expandedKeys.filter(k => k !== key)
      });
    } else {
      // 添加 key
      this.setState({ expandedKeys: [...expandedKeys, key] });
    }
  };

  render() {
    return (
      <div>
        <h1>Form</h1>
        <br />
        <MyInput value={this.state.inputValue} onChange={this.onTextChange} />;
        <button onClick={this.onTextReset}>Reset</button>
        <p>Input Value：{this.state.inputValue}</p>
        <Tabs>
          <TabPane tab="Tab 1" key="421">
            Content of Tab Pane 1
          </TabPane>
          <TabPane tab="Tab 2" key="422">
            Content of Tab Pane 2
          </TabPane>
        </Tabs>
        <Tabs activeKey={this.state.activeKey} onChange={this.onTabChange}>
          <TabPane tab="Tab 1" key="423">
            Content of Tab Pane 1
          </TabPane>
          <TabPane tab="Tab 2" key="424">
            Content of Tab Pane 2
          </TabPane>
        </Tabs>
        <p>activeKey:{this.state.activeKey}</p>
        <Tree
          expandedKeys={this.state.expandedKeys}
          selectedKeys={["0-0-2"]}
          onExpand={this.onExpand}
          onSelect={this.onSelect}
        >
          <TreeNode title="parent 1" key="0-0">
            <TreeNode title="leaf1" key="0-0-0" />
            <TreeNode title="leaf2" key="0-0-1" />
            <TreeNode title="leaf3" key="0-0-2" />
            <TreeNode title="leaf4" key="0-0-3" />
          </TreeNode>
        </Tree>
        <Card>
          <div>Ant Design 实战教程</div>
        </Card>
      </div>
    );
  }
}
